<template>
	<view>
		<view>
			<view class="user-info-container" style="padding-top: 120rpx;">
				<image class="user-avatar" mode="aspectFill" :src="userData.avatar"></image>
				<view class="user-content">
					<block v-if="isLogin">
						<view class="user-name">{{userData == null ? '请先登录' : userData.nickname}}</view>
						<view style="color:#999">{{userData == null ? '登录后畅享更多功能' : userData.mobile}}</view>
					</block>
					<view v-else  @tap="toLogin">
						<view class="user-name">您尚未登录，去登录</view>
						<view style="margin-top: 10rpx; font-size: 28rpx; color: #999; font-weight: 500;">登录以体验更多功能</view>
					</view>
				</view>
				<view @click="toMyInfo" >
					<u-icon name="setting" size="65" color="#3E4645"></u-icon>
				</view>
			</view>
			<view style="margin-left: 32rpx; font-size: 32rpx; font-weight: bold;">数据统计</view>
			<view class="flex-row-center" style="padding: 0 20rpx; margin-top: 20rpx;">
				<view class="flex-col-start" style="width: 33.3%">
					<view style="font-size: 40rpx; font-weight: bold; color: #111111;">--</view>
					<view style="font-size: 24rpx; font-weight: 500; color: #999999; margin-top: 12rpx;">今日收益</view>
				</view>
				<view class="flex-col-start" style="width: 33.3%;">
					<view style="font-size: 40rpx; font-weight: bold; color: #111111;">--</view>
					<view style="font-size: 24rpx; font-weight: 500; color: #999999; margin-top: 12rpx;">今日预计收益</view>
				</view>
				<view class="flex-col-start" style="width: 33.3%;">
					<view style="font-size: 40rpx; font-weight: bold; color: #111111;">--</view>
					<view style="font-size: 24rpx; font-weight: 500; color: #999999; margin-top: 12rpx;">待入账</view>
				</view>
				
			</view>
			<view class="flex-row-center" style="padding: 0 20rpx; margin-top: 20rpx;">
				<view class="flex-col-start" style="width: 33.3%">
					<view style="font-size: 40rpx; font-weight: bold; color: #111111;">--</view>
					<view style="font-size: 24rpx; font-weight: 500; color: #999999; margin-top: 12rpx;">待付款订单</view>
				</view>
				<view class="flex-col-start" style="width: 33.3%;">
					<view style="font-size: 40rpx; font-weight: bold; color: #111111;">--</view>
					<view style="font-size: 24rpx; font-weight: 500; color: #999999; margin-top: 12rpx;">待分配订单</view>
				</view>
				<view class="flex-col-start" style="width: 33.3%;">
					<view style="font-size: 40rpx; font-weight: bold; color: #111111;">--</view>
					<view style="font-size: 24rpx; font-weight: 500; color: #999999; margin-top: 12rpx;">维权订单</view>
				</view>
			</view>
			<view style="background: linear-gradient(to bottom, #8CA2F5, #5263CE);border-radius: 24rpx;padding: 24rpx;
			height: 160rpx;margin: 32rpx;color: #fff;display: flex;align-items: center;justify-content: space-between;">
				<view>
					<view style="">
						<text>￥</text>
						<text style="font-size: 44rpx;">{{ userData.money }}</text>
					</view>
					<view style="margin-top: 8rpx;font-size: 24rpx;">我的钱包(元)</view>
				</view>
				<view>
					<view style="border: solid 1px #fff;padding: 16rpx 24rpx;border-radius: 50rpx;" @tap="toPurse">
						<text style="font-size: 28rpx;padding-right: 4rpx;">查看</text>
						<u-icon name="arrow-right" size="24"></u-icon>
					</view>
				</view>
			</view>
			<!-- <view class="u-flex link-active" style="padding: 26rpx 32rpx;padding-bottom: 0;" @tap="toOrders">
				<viiew class="u-flex-1" style="font-weight: bold;">全部订单</viiew>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="order-option-group">
				<view v-for="item in optionEnterLink" :key="item.label"
					class="item-grid-option box-active"
					@tap="handleGridOptionEnter(item)"
				>
					<image class="item-icon" mode="aspectFit" :src="item.icon"></image>
					<text class="item-label">{{ item.label }}</text>
				</view>
			</view> -->
		</view>
		<u-gap height="24" bg-color="#F5F5F5"></u-gap>
		<view style="display: flex; flex-direction: column; width: 100%; background-color: #fff;">
			<text style="padding: 20rpx 30rpx; font-size: 28rpx; font-weight: bold;">更多功能</text>
			<view style="display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; align-items: center;">
				<view v-for="(item, index) in moreServices" :key="index"
					style="display: flex; flex-direction: column; align-items: center; width: 25vw; height: 160rpx; "
					@click="goto(item.path)">
					<image :src="item.icon" style="width: 48rpx; height: 48rpx; background: rgb(238, 238, 238);"></image>
					<text style="font-weight: 500; font-size: 28rpx; line-height: 44rpx; margin-top: 16rpx;">{{item.label}}</text>
				</view>
			</view>
		</view>

		<!-- 		<view style="padding: 0 0 100rpx 0;">
			<view v-for="item in tabBarList" :key="item.label">
				<view class="u-flex  link-active" style="padding: 26rpx 32rpx;" @click="handleMenuEnter(item)">
					<image :src="item.icon" mode="widthFix" style="width: 48rpx;height: 48rpx;margin-right: 16rpx;"></image>
					<viiew class="u-flex-1">{{item.label}}</viiew>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view> -->
		<!-- <button v-if="isLogin" class="u-reset-button logout-btn box-active" @tap="logout">
			退出登录
		</button> -->
		<public-fixed-box bottom>
			<public-tabbar></public-tabbar>
		</public-fixed-box>
	</view>

</template>

<script>
	import configUrl from '@/utils/config.js';
	import {
		request
	} from 'utils/request.js';
	// import { PlatformType } from "@/common/enum";
	// import { userApi } from '@/common/user.js';
	// import publicTabbarVue from '../../components/public-tabbar/public-tabbar.vue';
	// import { commonApi } from '../../common/serve';
	export default {
		name: "My",
		data() {
			return {
				masterImg: configUrl.appurlImg + '/app/mytop.png',
				ICON_DEFAULT_USERS: configUrl.appurlImg + '/assets/img/avatar.png',
				userData: {
					avatar: this.ICON_DEFAULT_USERS,
					nickname: '',
					isCompany: 0,
					isAgent: 0,
				},
				isLogin: false,
				moreServices: [{
					icon: "/static/image-userinfo/icon_signin.png",
					label: "发布虚拟订单",//入住中心
					path: "/pages/users/Settlein",
					visible: true
				}, {
					icon: "/static/image-userinfo/icon_share.png",
					label: "分享好友",
					path: "/pages/users/Share",
					visible: true
				}, {
					icon: "/static/image-userinfo/icon_law.png",
					label: "法律咨询",
					path: "",
					visible: true
				},
				{
					icon: "/static/image-userinfo/icon_customerservice.png",
					label: "联系平台",
					path: "",
					visible: true
				}, ],
			};
		},
		onLoad(option) {
			// let roldId = uni.getStorageInfoSync("roleId");
			// this.$u.vuex("vuex_platformType", PlatformType.Agent);

		},
		computed: {
			// isLogin() {
			//   const token = uni.getStorageSync('token');
			//   return !!token
			// },
			tabBarList() {
				return [{
						// icon: require("static/image-userinfo/icon_msgs.png"),
						label: "消息通知",
						path: "/pages/common/Home",
						visible: true,
					},
					{
						// icon: require("static/image-userinfo/icon_share.png"),
						label: "分享好友",
						path: "/pages/users/Share",
						visible: true,
					},
					{
						// icon: require("static/image-userinfo/icon_call.png"),
						label: "服务咨询",
						path: "/pages/users/Branches",
						visible: true,
					},
					{
						// icon: require("static/image-userinfo/icon_customerservice.png"),
						label: "联系客服",
						path: "/pages/common/Home",
						visible: true,
					},
					//   {
					//     label: "切换身份",
					//     path: "/pages/auth/AuthSwitch",
					//     visible: true,
					//   },
				];
			},
			optionEnterLink() {
				return [{
						// icon: require("static/image-userinfo/icon_deposit.png"),
						label: "定金待付",
						url: "/pages/users/Order?selectedId=" + 1,
					},
					{
						// icon: require("static/image-userinfo/icon_amount.png"),
						label: "尾款待付",
						url: "/pages/users/Order?selectedId=" + 2,
					},
					{
						// icon: require("static/image-userinfo/icon_wait_onsight.png"),
						label: "等待上门",
						url: "/pages/users/Order?selectedId=" + 3,
					},
					{
						// icon: require("static/image-userinfo/icon_completed.png"),
						label: "已完成",
						url: "/pages/users/Order?selectedId=" + 4,
					},
					{
						// icon: require("static/image-userinfo/icon_complain.png"),
						label: "维权",
						url: "/pages/users/Order?selectedId=" + 5,
					},
				];
			},
		},
		onShow() {
			this.dataList();
		},
		methods: {
			dataList() {
				let _this = this;
				request.getWithToken({
					url: '/user/getUserInfo',
					data: {}
				}).then(res => {
					console.log('返回用户信息：', res);
				})
				// userApi.getUserInfo().then((res) => {
				//	res.avatar = configUrl.appurlImg + res.avatar;
				// 	_this.userData = res;
				// 	_this.isLogin = true
				// 	_this.id = res.id;
				// })
			},
			goto(path) {
				if (path == "") return;
				uni.navigateTo({
					url: path
				});
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/auth/Login'
				})
			},
			handleServiceEnter(item) {
				if (item.url) {
					uni.navigateTo({
						url: item.url
					});
				}
			},
			handleMenuEnter(item) {
				if (item.path) {
					uni.navigateTo({
						url: item.path
					});
				}
			},
			handleGridOptionEnter(item) {
				// 判断是否绑定企业
				if (item.url === "/pages/company/ServiceOrder") {
					if (!this.userData.isCompany) {
						uni.navigateTo({
							url: "/pages/company/BindCompanyForm",
						});
						return;
					}
					this.$u.vuex("vuex_platformType", PlatformType.Company)
				}

				// 判断是否注册代理
				if (item.url === "/pages/agent/Order") {
					if (!this.userData.isAgent) {
						uni.navigateTo({
							url: "/pages/agent/Register",
						});
						return;
					}
					this.$u.vuex("vuex_platformType", PlatformType.Agent)
				}

				// 判断是否注册员工
				if (item.url === "/pages/employees/Order") {
					if (!this.userData.isTeamUser) {
						uni.navigateTo({
							url: "/pages/employees/FinanceRegister",
						});
						return;
					}
					this.$u.vuex("vuex_platformType", PlatformType.Employee)
				}

				if (!this.isLogin) {
					// 未登录跳转至登录页
					this.toLogin()
					return
				}

				if (item.url) {
					uni.navigateTo({
						url: item.url
					});
				}
			},
			logout() {
				uni.showModal({
					title: "提示",
					content: "确定要退出登录吗？",
					success: (res) => {
						if (res.confirm) {
							this.$store.commit("logout");
						}
					},
				});
			},
			toOrders() {
				uni.navigateTo({
					url: '/pages/users/Order',
				});
			},
			toPurse() {
				uni.navigateTo({
					url: '/pages/my/wallet',
				});
			},
			toMyInfo() {
				uni.navigateTo({
					url: '/pages/user/myInfo',
				});
			},
			toAddress(id) {
				uni.navigateTo({
					url: '/pages/user/MyAddress?addid=' + id
				});
			},
			toMyCar(id) {
				uni.navigateTo({
					url: '/pages/users/MyCar?id=' + id
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.user-info-container {
		padding: 30rpx;
		display: flex;
		align-items: center;
		// background-color: #fff;

		.user-avatar {
			display: block;
			width: 150rpx;
			height: 150rpx;
			background: #EBF5FE;
			border: 3rpx solid #FFF;
			border-radius: 50%;
		}

		.user-name {
			font-size: 36rpx;
			font-weight: bold;
		}

		.service-time {
			display: flex;
			align-items: center;
			font-size: 24rpx;

			.icon-vip {
				display: block;
				margin-right: 8rpx;
				width: 26rpx;
				height: 26rpx;
			}

			.buy-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 28rpx;
				padding: 0 20rpx;
				height: 44rpx;
				font-size: 24rpx;
				color: #f39800;
				border: 1px solid #f39800;
				border-radius: 999px;
			}
		}

		.user-content {
			height: 100rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 0 30rpx;
		}


	}

	.count-group {
		padding: 30rpx 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;

		.item-count {
			position: relative;
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			&+.item-count::before {
				position: absolute;
				left: 0;
				top: 50%;
				content: "";
				display: block;
				height: 44rpx;
				border-left: 0.5px solid #e0e0e0;
				transform: translateY(-50%);
			}

			.count-label {
				margin-bottom: 8rpx;
				font-size: 24rpx;
				color: #999;
			}

			.count-value {
				font-weight: bold;
			}
		}
	}

	.service-enter {
		margin: 22rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;

		.item-service {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 32rpx 0;
			border-radius: 8rpx;

			.item-icon {
				display: block;
				margin-bottom: 14rpx;
				height: 100rpx;
				width: 100rpx;
			}

			.item-label {
				font-size: 24rpx;
			}
		}
	}

	.grid-option-group {
		margin: 22rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;

		.item-grid-option {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: calc(100% / 3);
			padding: 32rpx 0;
			border-radius: 8rpx;

			.item-icon {
				display: block;
				margin-bottom: 20rpx;
				height: 80rpx;
				width: 80rpx;
			}

			.item-label {
				font-size: 24rpx;
			}
		}
	}

	.logout-btn {
		margin: 44rpx 22rpx 22rpx;
		background-color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 8px;
	}

	.order-option-group {
		margin: 24rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		// background-color: #fff;
		overflow: hidden;

		.item-grid-option {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: calc(100% / 5);
			padding: 32rpx 0;
			border-radius: 8rpx;

			.item-icon {
				display: block;
				margin-bottom: 20rpx;
				height: 80rpx;
				width: 80rpx;
			}

			.item-label {
				font-size: 26rpx;
			}
		}
	}
</style>